<template>
  <view>
    <view class="nav-wrap">
      <u-icon
        class="icon"
        color="rgb(0, 0, 0)"
        size="20"
        name="arrow-left"
        @click="goback"
      ></u-icon>
      <view class="text">基本信息</view>
    </view>
    <view class="tit req">必填项</view>
    <view class="medical-record-wrap box-wrap">
      <view v-for="(item, index) in RequiredItemList" :key="item">
        <view class="medical-record-row title">
          <text
            class="medical-record-cell text-key"
            :class="RequiredItemList.length - 1 !== index ? 'cell-border' : ''"
          >
            {{ UserInfoText[item] }}
          </text>
          <text
            class="medical-record-cell text-val"
            :class="RequiredItemList.length - 1 !== index ? 'cell-border' : ''"
          >
            <uni-datetime-picker
              :disabled="
                pageState === PageState.AddUser || item !== UserKeys.Birthday
                  ? true
                  : false
              "
              :clear-icon="false"
              type="date"
              :border="false"
              end="2029-6-20"
              @change="changeBirthDay"
            >
              <view class="wrap" @click="() => togglePicker(true, item)">
                <view class="item-left">
                  <input
                    :disabled="
                      SelectItem.includes(item) || item === UserKeys.Birthday
                    "
                    type="text"
                    placeholder="请选择"
                    :value="
                      SelectItem.includes(item) ? getText(item) : userInfo[item]
                    "
                    @input="(e) => changeVal(e, item)"
                  />
                </view>
                <view class="item-right" v-if="SelectItem.includes(item)">
                  <u-icon
                    color="rgb(0, 0, 0)"
                    size="20"
                    name="arrow-right"
                  ></u-icon>
                </view>
                <view class="item-right" v-else> </view>
              </view>
            </uni-datetime-picker>
          </text>
        </view>
      </view>
    </view>
    <view class="tit opt">选填项</view>
    <view class="medical-record-wrap box-wrap">
      <view v-for="(item, index) in OptionalItemList" :key="item">
        <view class="medical-record-row title">
          <text
            class="medical-record-cell text-key"
            :class="OptionalItemList.length - 1 !== index ? 'cell-border' : ''"
          >
            {{ UserInfoText[item] }}
          </text>
          <text
            class="medical-record-cell text-val"
            :class="OptionalItemList.length - 1 !== index ? 'cell-border' : ''"
          >
            <view class="wrap" @click="() => togglePicker(true, item)">
              <view class="item-left">
                <input
                  :disabled="SelectItem.includes(item)"
                  type="text"
                  placeholder="请选择"
                  :value="
                    SelectItem.includes(item) ? getText(item) : userInfo[item]
                  "
                  @input="(e) => changeVal(e, item)"
                />
              </view>
              <view class="item-right" v-if="SelectItem.includes(item)">
                <u-icon
                  color="rgb(0, 0, 0)"
                  size="20"
                  name="arrow-right"
                ></u-icon>
              </view>
              <view class="item-right" v-else>
                {{ getUnit(item) }}
              </view>
            </view>
          </text>
        </view>
      </view>
    </view>
    <u-picker
      keyName="text"
      closeOnClickOverlay
      :show="isShowPicker"
      :columns="pickerData"
      @confirm="confirmPicker"
      @cancel="() => togglePicker(false)"
    />
  </view>
</template>

<script>
  import {
    UserKeys,
    SelectItem,
    RelationTypeText,
    RelationTypeList,
    GenderTypeText,
    GenderTypeList,
    FunctionStatusText,
    FunctionStatusList,
    StatusText,
    StatusList,
    PageState,
    defaultUser,
    RequiredItemList,
    UserInfoText,
    OptionalItemList,
  } from "../helper";

  export default {
    components: {},

    props: {
      user: {
        type: Object,
        default: {},
      },
      goback: {
        type: Function,
        default: () => {},
      },
      pageState: {
        type: String,
        default: PageState.AddUser,
      },
    },

    data() {
      return {
        isShowPicker: false,
        pickerData: [],
        userInfo: { ...defaultUser },
      };
    },

    created() {
      if (this.pageState === PageState.ModifyUser) {
        this.userInfo = this.user;
      }
    },

    methods: {
      changeBirthDay(val) {
        this.userInfo[UserKeys.Birthday] = val;
      },

      changeVal({ detail: { value } }, key) {
        this.userInfo[key] = value;
      },

      confirmPicker({ value: [item] }) {
        this.userInfo[item.key] = item.id;
        this.isShowPicker = false;
      },

      togglePicker(isShowPicker, key) {
        if (!isShowPicker) {
          this.isShowPicker = isShowPicker;
        } else {
          if (!SelectItem.includes(key)) {
            return;
          }
          this.formatePickerData(key);
          this.isShowPicker = isShowPicker;
        }
      },

      formatePickerData(key) {
        if (key === UserKeys.Relation) {
          this.pickerData = [
            RelationTypeList.map((item) => {
              return {
                key,
                id: item,
                text: RelationTypeText[item],
              };
            }),
          ];
        } else if (key === UserKeys.Gender) {
          this.pickerData = [
            GenderTypeList.map((item) => {
              return {
                key,
                id: item,
                text: GenderTypeText[item],
              };
            }),
          ];
        } else if (
          [
            UserKeys.SmokingHistory,
            UserKeys.DrinkingHistory,
            UserKeys.MaritalStatus,
            UserKeys.FertilityStatus,
          ].includes(key)
        ) {
          this.pickerData = [
            StatusList.map((item) => {
              return {
                key,
                id: item,
                text: StatusText[item],
              };
            }),
          ];
        } else if (
          [UserKeys.LiverFunction, UserKeys.RenalFunction].includes(key)
        ) {
          this.pickerData = [
            FunctionStatusList.map((item) => {
              return {
                key,
                id: item,
                text: FunctionStatusText[item],
              };
            }),
          ];
        }
      },

      getText(key) {
        switch (key) {
          case UserKeys.Relation:
            return RelationTypeText[this.userInfo[key]];
          case UserKeys.Gender:
            return GenderTypeText[this.userInfo[key]];
          case UserKeys.SmokingHistory:
          case UserKeys.DrinkingHistory:
          case UserKeys.MaritalStatus:
          case UserKeys.FertilityStatus:
            return StatusText[this.userInfo[key]];
          case UserKeys.LiverFunction:
          case UserKeys.RenalFunction:
            return FunctionStatusText[this.userInfo[key]];
        }
      },

      getUnit(key) {
        switch (key) {
          case UserKeys.Height:
          case UserKeys.Waistline:
            return "cm";
          case UserKeys.Weight:
            return "kg";
          default:
            return "";
        }
      },
    },

    computed: {
      UserKeys: function () {
        return UserKeys;
      },
      PageState: function () {
        return PageState;
      },
      UserInfoText: function () {
        return UserInfoText;
      },
      RequiredItemList: function () {
        return RequiredItemList;
      },
      OptionalItemList: function () {
        return OptionalItemList;
      },
      RelationTypeText: function () {
        return RelationTypeText;
      },
      SelectItem: function () {
        return SelectItem;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .nav-wrap {
    overflow: hidden;
    height: 87rpx;
    background: $uni-bg-color;
    line-height: 87rpx;

    & .icon {
      position: relative;
      top: 50%;
      margin: -21rpx;
      left: 30rpx;
      width: 50rpx;
    }

    & .text {
      width: 750rpx;
      text-align: center;
      height: 87rpx;
      line-height: 87rpx;
      font-weight: bold;
    }
  }

  .box-wrap {
    background: $uni-bg-color;
    padding: 0 20rpx 20rpx 20rpx;
  }

  .opt {
    color: rgba(166, 166, 166, 1);
  }

  .req {
    color: rgba(65, 171, 133, 1);
    padding-top: 20rpx;
  }

  .tit {
    padding-left: 20rpx;
    background: $uni-bg-color;
    font-weight: bold;
  }

  .title {
    line-height: 100rpx;
    font-weight: bold;
  }

  .cell-border {
    border-bottom: 1rpx solid $uni-border-color;
  }

  .remarks {
    margin: 20rpx 0;
    border: none;
  }

  .medical-record-wrap {
    display: table;

    & .medical-record-row {
      display: table-row;
      width: 750rpx;
      height: 100rpx;

      & .medical-record-cell {
        display: table-cell;
        width: 375rpx;

        & .wrap {
          display: table;

          & .item-left {
            width: 90%;
            display: table-cell;
          }

          & .item-right {
            display: table-cell;
            width: 10%;
          }
        }
      }

      & .text-key {
        text-align: left;
      }

      & .text-val {
        text-align: right;
      }
    }
  }
</style>
